<template>
<div>
  <div class="table-data">
    <div class="search-box">
      <el-button size="small" @click="handleAdd(0)" type="primary"><i class="el-icon-plus"></i><span>添加一级分类</span></el-button>
    </div>
    <el-tree
      :data="dataList"
      :show-checkbox-="false"
      node-key="id"
      :expand-on-click-node="false"
      v-loading="loading"
      :accordion="true"
      element-loading-text="正在加载">
      <span class="custom-tree-node" slot-scope="{ node,data}">
        <span>{{ data.name}}</span>
        <!-- <span v-if="data.children.length>0"> -->
        <span v-if="data.pid==0">
          <el-button
            type="text"
            size="mini"
            @click="() => copyToClip(data.id)">
            复制地址
          </el-button>
        </span>
        <span v-if="data.grade!=3">
          <el-button
            type="text"
            size="mini"
            @click="() => handleAdd(1,data)">
            添加子分类
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="() => handleEdit(node,data)">
            编辑分类
          </el-button>
          <el-button
            type="text"
            class="danger"
            size="mini"
            @click="() => handleRemove(node,data)">
            删除
          </el-button>
        </span>
      </span>
    </el-tree>
    <EditDialog :isEdit="isEdit" :isAdd="isAdd" :key="timer" :isState="isState" :formData1="DataContent" :form="formData" @closeDialog="closeDialog" @loadData="loadData"></EditDialog>
  </div>
</div>
</template>

<script lang="ts">
import { Component, Vue, Provide,Prop,Watch } from "vue-property-decorator";
// import { State, Getter, Mutation, Action } from "vuex-class";
import EditDialog from "./EditDialog.vue";
import goodsApi from "@/api/goods";
import { Row } from 'element-ui';
@Component({
  components: {EditDialog }
})
export default class kindList extends Vue {
  // @Getter("user") getUser: any;
  @Provide() page: number = 1; // 当前page
  @Provide() size: number = 10; // 请求数据的个数 默认5
  @Provide() total: number = 0; // 总数据条数
  @Provide() isAdd: Boolean = false; // 是否展示添加弹窗
  @Provide() isEdit: Boolean = false; // 是否展示编辑弹窗
  @Provide() isState: Boolean = false; // 是否为菜单
  @Provide() loading: Boolean = true; // 是否显示加载图标
  @Provide() timer: any = '';
  @Provide() formData: any = {
    id:"",
    name:"",
    desc: "",
    order:"",
    img:"",
    status:"",
    pid:"",
  };
  @Provide() dataList:any=[];
  @Provide() DataContent:any=[];
  // 删除分类
  handleRemove(node:any, data:any) {
      this.$confirm('此操作将永久删除----'+data.name+'----分类,是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal:false
      }).then(() => {
        goodsApi.removeKind({id:data.id})
        .then((res: any) => {
          if(res.data.status){
            this.$message({
              message: '操作成功',
              type: "success"
            });
            this.loadData();
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
      
    }
 // 添加分类
  handleAdd(i:any,row:any){
    this.timer = new Date().getTime()
    this.isState=true
    this.isAdd=true;
    this.isEdit=true;
    this.formData={id:"", name:"",desc: "",order:"",img:"", status:1, pid:"", }
    if(i==0){
      this.formData.pid=0
      this.DataContent = this.dataList
    }else{
      this.formData.pid=row.id
      this.DataContent = row.children
    }
  }
  //复制地址
  copyToClip(id) {
    let url = 'pages/commodity/commodity?id='+id
    this.$copyText(url)
      .then(()=>{
        this.$message({
          message: '复制成功',
          type: "success"
        });
      })
      .catch(()=>{})
  }
  // 编辑
  handleEdit(index: number, row: any){
    this.isEdit=true;
    this.timer = new Date().getTime()
    this.formData.id=row.id
    this.formData.name=row.name
    this.formData.img=row.img
    this.formData.order=row.order
    this.formData.desc=row.desc
    this.formData.pid=row.pid
    this.formData.status=row.status
    this.DataContent = this.dataList
    if(row.status==1){
      this.isState=true
    }else{
      this.isState=false
    }
  }
  // 关闭弹窗
  closeDialog() {
    this.isAdd = false;
    this.isEdit = false;
    this.loadData();
  }
  created() {
    this.loadData();
  }

  loadData() {
    goodsApi.goodsKind()
      .then((res: any) => {
        this.dataList=res.data.data
        this.loading=false
    });
  }

  handleSizeChange(val: number): void {
    this.size = val;
    this.page = 1;
    this.loadData();
  }
  handleCurrentChange(val: number): void {
    this.page = val;
    this.loadData();
  }

  handleSearch(): void {
    // 点击搜索
    this.page = 1;
    this.loadData();
  }
}
</script>

<style lang="scss">
.el-range-editor.el-input__inner{
  margin-right: 10px
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.el-tree-node:focus > .el-tree-node__content {
  background-color: #87CEFA!important;
}
.el-tree-node:hover > .el-tree-node__content {
  background-color: #87CEFA !important;
}
</style>
